<template>
	<div>
		<el-table
			:data="tableData"
			style="width: 100%"
			stripe
			highlight-current-row
			height="600"
			empty-text="暂时没有数据"
		>
			<el-table-column label="学生编号" prop="studentid" width="100" sortable align="center"></el-table-column>
			<el-table-column label="学生姓名" prop="studentname" sortable align="center"></el-table-column>
			<el-table-column label="课程编号" prop="courseid" width="100" sortable align="center"></el-table-column>
			<el-table-column label="课程名称" prop="coursename" sortable align="center"></el-table-column>
			<el-table-column label="得分" prop="score" sortable align="center"></el-table-column>
			<el-table-column
				prop="score"
				label="成绩等级"
				width="100"
				:filters="[{ text: '不及格', value: '不及格' }, { text: '及格', value: '及格' }, { text: '良好', value: '良好' }, { text: '优秀', value: '优秀' }]"
				:filter-method="filterTag"
				filter-placement="bottom-end"
			>
				<template slot-scope="scope">
					<el-tag :type="tagType(scope.row.score)" disable-transitions>{{ scope.row.score | scoreFilter }}</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<el-button icon="el-icon-refresh-right" type="infor" @click="getGrade"></el-button>
	</div>
</template>

<script>
	var scoreType = [
					{
						max: 59,
						type: '不及格'
					},
					{
						max: 70,
						type: '及格'
					},
					{
						max: 84,
						type: '良好'
					},
					{
						max: 100,
						type: '优秀'
					}
				]
	export default{
		data(){
			return {
				tableData:[]
			}
		},
		filters: {
			scoreFilter(value) {
				for (let i in scoreType) {
					if (value < scoreType[i].max) return scoreType[i].type;
				}
				return '未知';
			}
		},
		mounted:function(){
			this.getGrade()
		},
		methods:{
			getGrade(){
				let that = this;
				that.tableData = [];
				that.axios
					.post(that.$store.state.serverHost + '/grade/getGrade/',{id:that.$store.state.userInfo.id})
					.then(res => {
						let reg = new RegExp("'", 'g');
						for (let i in res.data) {
							let data = JSON.parse(res.data[i].replace('"', '').replace(reg, '"'));
							that.tableData.push(data);
						}
					})
					.catch(e => {
						console.log(e);
						that.$message.error('获取数据失败');
					});
			},
			tagType(value) {
				for (let i in scoreType) {
					if (value < scoreType[i].max) {
						switch (scoreType[i].type) {
							case '不及格':
								return 'danger';
							case '及格':
								return 'warning';
							case '良好':
								return '';
							case '优秀':
								return 'success';
						}
					}
				}
				return 'info'
			},
			filterTag(value, row) {
				for (let i in scoreType) {
					if (row.score < scoreType[i].max) {
						return scoreType[i].type == value;
					}
				}
			}
		}
	}
</script>

<style>
</style>
